<template>
  <view class="poster">
    <u-navbar
      :is-back="false"
      title="海报"
      :border-bottom="false"
      back-icon-color="#ffffff"
      title-color="#ffffff"
      title-size="32"
      :background="{ 'background-color': '#CB712B' }"
    />
		<view class="swiper">
			<carousel :img-list="posterList" url-key="image" @change="swiperChange"/>
		</view>
<!--    <view class="poster-content">
      <swiper
        class="swiper"
        :current="current"
        indicator-color="rgba(0, 0, 0, .5)"
        indicator-active-color="rgb(66, 82, 253)"
        :circular="true"
        @change="swiperChange"
      >
        <template v-for="(item, index) in posterList">
          <swiper-item :key="item.id">
            <image
              :src="item.image"
              class="img"
              :class="index == current ? 'img--active' : ''"
              mode="heightFix"
            ></image>
          </swiper-item>
        </template>
      </swiper>
    </view> -->
    <view class="poster-btn" @click.stop="saveImg">
      分享保存
    </view>
	<view class="remark">保存到相册可分享到朋友圈</view>
    <lPainter
      :custom-style="'position:absolute;left:-9999rpx;top:-9999rpx'"
      isBase64ToPath
      isRenderImage
      :board="board"
      :sleep="1"
      @success="poster = $event"
      @fail="fail"
      @done="drawDone"
      type
    ></lPainter>
    <!-- <lPainter
      :custom-style="'position:absolute;left:-9999rpx;top:-9999rpx'"
      ref="painter"
      @success="poster = $event"
      @fail="fail"
    ></lPainter> -->
  </view>
</template>

<script>
import { posterInfo, QRCode } from "@/utils/api";
import lPainter from "@/components/painter/index"; 
import carousel from '@/components/vear-carousel/vear-carousel'
export default {
  components: {
    lPainter,
	carousel
  },
  data() {
    return {
      showBtn: false,
      isRenderImage: false,
      code: "", // 二维码地址
      current: 0,
      posterList: [],
      board: {},
      poster: "",
    };
  },
  onLoad() {
    this.initInfo();
    uni.showLoading();
  },
  onShow() {
    if (uni.getStorageSync("token")) {
      this.initCode().then(() => {
        uni.hideLoading();
        this.drawInfo();
      });

      // this.showBtn = true;
    } else {
      this.showBtn = false;
    }
  },
  methods: {
    drawDone() {
      console.log("绘制完成===");
      uni.hideLoading();
      this.showBtn = true;
    },
    drawInfo() {
      var that = this;
      this.board = {
        width: "750rpx",
        height: "1344rpx",
        views: [
          {
            type: "image",
            src: that.posterList[this.current].image,
            mode: "aspectFill",
            css: {
              left: "0rpx",
              top: "0rpx",
              width: "750rpx",
              height: "1344rpx",
            },
          },
          {
            type: "image",
            src: that.code,
            mode: "aspectFit",
            css: {
              left: "580rpx",
              top: "1150rpx",
              width: "150rpx",
              height: "150rpx",
            },
          },
        ],
      };
    },
    initInfo() {
      var that = this;
      // this.initCode().then(() => {
      posterInfo().then((resp) => {
        console.log("海报参数", resp);
        if (resp.code == 200) {
          this.posterList = resp.data;
        }
        // });
      });
    },
    // 获取二维码
    initCode() {
      var that = this;
      return new Promise((resolve, reject) => {
        QRCode().then((resp) => {
          if (resp.code == 200) {
            that.code = resp.data;
            resolve();
          }
        });
      });
    },
    fail(e) {
      console.log("12121======", e);
    },
    swiperChange(current) {
      // var that = this;
      // this.showBtn = false;
      // // console.log("swiperChange", e);
      // const { current } = e.detail;
      this.current = current;
      this.drawInfo();
    },
    saveImg() {
      var that = this;

      if (uni.getStorageSync("token")) {
        uni.showLoading();
        uni.saveImageToPhotosAlbum({
          filePath: this.poster,
          success(res) {
            uni.hideLoading();
            uni.showToast({
              title: "已保存到相册",
              icon: "success",
              duration: 2000,
            });
          },
          fail(error) {
            console.log(error);
            uni.hideLoading();
          },
        });
        // uni.downloadFile({
        //   url: that.posterList[that.current].image,
        //   success: ({ tempFilePath, statusCode }) => {
        //     uni.saveImageToPhotosAlbum({
        //       filePath: tempFilePath,
        //       success: () => {
        //         uni.hideLoading();
        //         uni.showToast({
        //           title: "保存成功",
        //         });
        //       },
        //       fail: () => {
        //         uni.hideLoading();
        //         uni.showToast({
        //           icon: "none",
        //           title: "保存失败",
        //         });
        //       },
        //     });
        //   },
        //   fail: (error) => {
        //     console.log("保存失败", error);
        //     uni.hideLoading();
        //     uni.showToast({
        //       icon: "none",
        //       title: "保存失败",
        //     });
        //   },
        // });
      } else {
        uni.showToast({
          icon: "none",
          title: "请先登录",
          success: () => {
            setTimeout(() => {
              uni.switchTab({
                url: "/pages/mine/mine",
              });
            }, 1500);
          },
        });
      }
    },
    preClick() {
      if (this.current == 0) {
        uni.showToast({
          icon: "none",
          title: "已经是第一张了！",
        });
      } else {
        this.showBtn = false;
        this.current--;
        this.drawInfo();
      }
    },
    nextClick() {
      if (this.current == this.posterList.length - 1) {
        uni.showToast({
          icon: "none",
          title: "已经是最后一张了！",
        });
      } else {
        this.showBtn = false;
        this.current++;
        this.drawInfo();
      }
    },
  },
};
</script>
<style>
page {
  background-color: #EEEFF0;
}
</style>
<style lang="scss">
.poster {
  width: 100%;
  position: relative;
  &-bg {
    width: 100%;
    height: auto;
    margin-bottom: -10rpx;
  }
  &-content {
    // border: 1rpx solid red;
    width: 690rpx;
    box-sizing: border-box;
	margin: 30rpx auto;

    background-color: #ffffff;
    border-radius: 20rpx;
    .swiper {
      // height: 930rpx;
      height: 1150rpx;
      text-align: center;
      position: relative;
      .img {
        // width: 100%;
        width: auto;
        height: 100%;
        // transform: scale(0.8);
        // transition: all 0.3s linear;
      }
      .img--active {
        // transform: scale(1);
      }
    }
    .btn {
      width: 220rpx;
      line-height: 60rpx;
      text-align: center;
      background: linear-gradient(0deg, #6879fe 0%, #98a4ff 100%);
      border-radius: 30rpx;
      font-size: 30rpx;
      color: #ffffff;
      margin: 0 auto;
      margin-top: 30rpx;
      // display: none;
    }
  }
  &-oper {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 40rpx;
    top: 1150rpx;
    width: 100%;
    .arrow {
      width: 100rpx;
      height: 100rpx;
      opacity: 0.7;
      // position: absolute;
      // top: 50%;
      // margin-top: -50rpx;
    }
    .arrow-left {
      // left: 0;
      // top: 50%;
      // margin-top: -50rpx;
    }
    .arrow-right {
      // right: 0;
    }
  }
  &-btn {
    width: 594rpx;
    text-align: center;
    background: linear-gradient(to right, #E7AA56 0%, #CB712B 100%);
    border-radius: 60rpx;
    font-size: 30rpx;
    color: #ffffff;
    margin: 0 auto;
	padding: 20rpx 0;
  }

}
  .remark{
	  font-size: 24rpx;
	  color: #999999;
	  text-align: center;
	  margin: 18rpx 0;
  }
  .swiper{
	  margin: 30rpx 0;
  }
</style>
